<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>jQuery input field</title>
	<link rel="stylesheet" href="jfinput.css" />
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jfinput.js" type="text/javascript"></script>
<script type="text/javascript">
var update_fun = function ( user_value, id, old_value, view_value ) {
	alert( "Call user function with params:\n==============\nNew user value: "+ user_value
		+"; \nid element: " + id 
		+"; \nvalue for view: " + view_value
		+"; \nold_value: "+ old_value 
	);
}
var field1 = {
	size: 40,
	callback: function( user_value, id, old_value, view_value ) { update_fun( user_value, id, old_value, view_value );}
};

var field2 = {
	size: 40,
	callback: function( user_value, id, old_value, view_value ) { update_fun( user_value, id, old_value, view_value );}
};

var field3 = {
	size: 40,
	prompting: 'title',
	callback: function( user_value, id, old_value, view_value ) { update_fun( user_value, id, old_value, view_value );}
};

var field4 = {
	size: 40,
	prompting: 'title',
	callback: function( user_value, id, old_value, view_value ) { update_fun( user_value, id, old_value, view_value );}
};

var field_textarea = {
	rows: 10,
	cols: 10,
	type: 'textarea',
	prompting: 'title',
	callback: function( user_value, id, old_value, view_value ) { update_fun( user_value, id, old_value, view_value );}
};

var field_password = {
	type: 'password',
	prompting: 'title',
	callback: function( user_value, id, old_value, view_value ) { update_fun( user_value, id, old_value, view_value );}
};

var pre_img = new Image();
pre_img.src = 'loading.gif';
var field_textarea_view_call = {
	rows: 10,
	cols: 10,
	type: 'textarea',
	prompting: 'title',
	view_call: function( user_value, id, old_value, view_value, is_load ) { 
		if (!is_load) {
			$('#'+ id).html('<img src="'+ pre_img.src +'" width="120" height="120" border="0" alt="">');
			alert('Now I can change element view value....');
		}
		return view_value;
	}
};

var field_textarea_view_call_ajax_data = {
	css: {
		height: '200px',
		width: '200px'
	},
	rows: 10,
	cols: 10,
	type: 'textarea',
	prompting: 'title',
	view_call: function( user_value, id, old_value, view_value, is_load ) { 
		if ( user_value == view_value ) return;
		if (!is_load) $('#'+ id).html('<img src="'+ pre_img.src +'" width="120" height="120" border="0" alt="">');
		return view_value;
	},

	ajax_call_data: {
		type: "GET",
		dataType: 'html',
		url: "server.html",
		success: function( msg, status, r ) {
			alert( "Data Saved: " + msg );
			/* Восстанавливаем старое значение, передаем фокус и востанавливаем поле ввода на элементе */
//			$(this).html(msg).focus().click();
			$(this).html(msg);
		}
	}
};

$(document).ready(function(){
	$('#div1').jfinput(field1);
	$('#div2').jfinput(field2);
	$('#div3').jfinput(field3);
	$('#div4').jfinput(field4);
	$('#div5').jfinput(field_textarea);
	$('#div6').jfinput(field_password);
	$('#div7').jfinput(field_textarea_view_call);
	$('#div8').jfinput(field_textarea_view_call_ajax_data);
});

</script>

</head>
<body>
<div class="wrap">
	Еxample 1.<br />
	No empty DIV:<br />
	<div id="div1" class="field_input">Text</div>
</div>
<div class="wrap">
	Еxample 2.<br />
	Empty DIV ():<br />
	<div id="div2" class="field_input"></div>
</div>
<div class="wrap">
	Еxample 3.<br />
	Empty DIV with "default value" tag ('prompting' options param):<br />
	<div id="div3" class="field_input" title="Default value for this div"></div>
</div>
<div class="wrap">
	Еxample 4.<br />
	No empty DIV with "default value" tag ('prompting' options param):<br />
	<div id="div4" class="field_input" title="Default value for this div">Text</div>
</div>
<div class="wrap">
	Еxample 5.<br />
	Textarea: ('type' options param):<br />
	<div id="div5" class="field_input" title="Default value for this div">Text</div>
</div>
<div class="wrap">
	Еxample 6.<br />
	Password: ('type' options param):<br />
	<div id="div6" class="field_input" title="Please input your password here"></div>
</div>
<div class="wrap">
	Еxample 7.<br />
	Textarea with load image: ('type' options param):<br />
	<div id="div7" class="field_input" title="Default value for this div">Text</div>
</div>
<div class="wrap">
	Еxample 8.<br />
	Textarea with load image and ajax: ('type' options param):<br />
	<div id="div8" class="field_input" title="Default value for this div">Text</div>
</div>
</body></html>